<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>v_if条件渲染</title>
  </head>
  <body>
  <div id="app">
    <!--这里还可以看到checkbox的 checked属性的值-->
    <input type="checkbox" v-model:checked="sel">是否同意条款[v-if实现]
    <!--
      v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件 <h1>
      v-if会确保在切换过程中,条件块内的事件监听器和子组件销毁和重建
      如果运行条件很少改变,使用v-if
    -->
    <h1 v-if="sel">你同意条款</h1>
    <h1 v-else>你不同意条款</h1>
  </div>
  <script src="vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {//data数据池
        sel: false
      }
    })
  </script>
  </body>
</html>